<template>
<div class="recordAll">
  <div class="recordNbumber">
    <div class="historyMaxNumber">历史抽取最高美豆：{{historyMax}}</div>
    <div class="todayMaxNumber">当日抽取最高美豆：{{todayMax}}</div>
  </div>
  <div class="recordList" v-if="showRecordItem.length > 0">
    <record-item 
    v-for="(item, index) in showRecordItem"
    :key="index"
    :shareIndetailAllItem = 'item'
    ></record-item>
  </div>
  <div class="integralBtn" v-if="showRecordItem.length > 0" @click="toMyIntegral">
    <p class="integraldiv">{{getCurrentIntegral}}</p>
    <p>兑换美豆</p>
  </div>
  <div v-if="showRecordItem.length == 0" class="lackRecordtPage">
    <div class="lackRecordTxt">
      <div><img src="/static/images/lack/lackrecord.png"></div>
      <p>暂无奖池记录~</p>
    </div>
  </div>
</div>
</template>

<script>
  import recordItem from '@/components/integral-record/record-item'
  export default {
    components: {
      recordItem
    },
    onShow(){
      this.getHelp()
      this.doCurrentIntegral()
      this.getMax()
    },
    data(){
      return{
        recordItems: [],
        getCurrentIntegral: 0,//得到当前的积分
        historyMax: 0,//历史抽到的最高的
        todayMax: 0,//当日抽到的最高的
      }
    },
    computed:{
      showRecordItem(){
        return this.recordItems
      },
      comGetCurrentIntegral(){
        return this.getCurrentIntegral
      }
    },
    methods: {
      getHelp(){//帮助的人
        this.$http.get('integral/my/help').then((res)=>{ 
          this.recordItems = res.data.data
        })
      },
      doCurrentIntegral(){//总共有多少美豆
        this.$http.get(`integral/my/integral`,'','',false).then((data)=>{ 
          this.getCurrentIntegral = data.data.data.integral
        })
      },
      getMax(){//分别获取到当日抽取到的最高和历史的最高
        this.$http.get('integral/random_record').then((res)=>{ 
          this.historyMax = res.data.data.historyMax
          this.todayMax = res.data.data.todayMax
        })
      },
      toMyIntegral(){
        const url = '/pages/user-withdrawal/main';
        wx.navigateTo({url})
      },
    }
  }
</script>

<style scoped>
.recordAll{
  background: #efafb0;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.recordAll .recordNbumber{
  display: flex;
  padding: 0 45rpx;
  font-size: 28rpx;
  color: #fff;
  margin-top: 30rpx;
  justify-content: space-between;
}
.recordList{
  padding:0 45rpx;
  overflow: hidden;
  margin-bottom:105rpx;
}
.lackRecordtPage{
  width: 100%;
  height: 100%;
  margin-top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackRecordtPage .lackRecordTxt div{
  width: 169rpx;
  height: 169rpx;
  margin: 0 auto;
}
.lackRecordtPage .lackRecordTxt div img{
  width: 100%;
  height: 100%;  
}
.lackRecordtPage .lackRecordTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  margin-top: 25rpx;
}
.integralBottom{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background: #e68a8a;
  z-index: 2;
  display: flex;
  font-size: 36rpx;
  align-items: center;
  justify-content: center;
  color:#fff;
}
.integralBottom p{
  color:#fff;
  font-weight: 600;
}
.integralBtn{
  height: 110rpx;
  width: 110rpx;
  background: #000;
  opacity: 0.75;
  border-radius: 100%;
  font-size: 20rpx;
  color: #f37e7e;
  text-align: center;
  position: fixed;
  bottom: 120rpx;
  right: 20rpx;
  z-index: 101;
  overflow: hidden;
}
.integralBtn .integraldiv {
  font-size: 26rpx;
  margin-top: 25rpx;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>
